<style scoped lang="less">
	.subject-container {
		background-color: white;
		height: 100vh;
		overflow: scroll;
	}
	
	.q-subject-item-price {
		color: #DD4738;
	}
	
	.subject-title {
		top: 0;
		z-index: 1000;
		background-color: white;
		position: fixed;
		width: 100vw;
		height: 10vw;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.6rem;
	}
	.subject-list{
		padding-top: 10vw;
		/*height: calc(100vh - 10vw);*/
		/*box-sizing: content-box;*/
	}
	
	.q-subject-item {
		margin-top: 0.4rem;
		width: 49%;
	}
	
	.q-subject-item-wrap {
		margin: 0 2% 2% 2% ;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.q-subject-item-title {
		line-height: 1.4;
		font-size: 0.5rem;
		height: 1.3rem;
		//overflow: hidden;
		//white-space: nowrap;
		//text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.q-subject-item-discount {
		height: 0.6rem;
		color: @--price;
		font-size: 0.4rem;
	}
	
	.q-subject-item-info {
		font-size: 0.4rem;
		margin-top: 0.2rem;
		display: flex;
		justify-content: space-between;
	}
	
	//.q-subject-item-symbol{
	//  margin-right: -0.1rem;
	//}
	span.q-subject-item-sales {
		color: @--gray;
	}
	
	.q-subject-item-show-more {
		text-align: center;
		font-size: 0.4rem;
		padding: 0.2rem;
	}
</style>
<template>
	<div class="subject-container" >
		<div v-if="subData!=null" class="subject-title">{{subData.title}}</div>
		<van-list
			class="subject-list"
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoad">
			<div class="subject-banner">
				<van-image v-if="subData!=null" :src="GLOBAL.getUrl(subData.banner!=null?subData.banner[0]:'')"
				           lazy-load></van-image>
			</div>
			<div class="q-subject-item-wrap" v-if="list!=null">
				<div @click="jump(item.goods_id)" class="q-subject-item" v-for="(item,index) in list" :key="index">
					<van-image :src="GLOBAL.getUrl(item.banner!=null?item.banner[0]:'')" lazy-load></van-image>
					<div class="q-subject-item-title">{{item.title}}</div>
					<div class="q-subject-item-discount">
						{{(item.vip_discount===null||item.vip_discount===0)?' ':'会员优惠:'+item.vip_discount/100+'元'}}
					</div>
					<div class="q-subject-item-info">
						<span class="q-subject-item-price"><span class="q-subject-item-symbol">￥</span>{{item.price/100}}</span>
						<span class="q-subject-item-sales">{{item.sales>0?'已售'+item.sales:''}}</span>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>
<script>
  import {actionDis} from "../../libs/action-tools";
  import {getList} from '@/api/subject';
  import {Image} from 'vant';
  import Vue from 'vue';
  import {List} from 'vant';
  const PAGE_SIZE = 16;

  Vue.use(Image).use(List);
  export default {
    name: 'subject-detail',
    data() {
      return {
        sub_id: null,
        subData: null,
        list: [],
        loading: false,
        finished: false,
      };
    },
    created() {
      this.sub_id = this.$route.params.sub_id;
    },
    methods: {
      onLoad() {
        if (!this.finished) {
          this.getData();
        }
      },
      jump(goods_id) {
        actionDis({type:this.GLOBAL.TYPE_LINK_ACTIVE,value:goods_id}, this)
      },
      getData() {
        let vm = this;
        let page = vm.list.length/PAGE_SIZE+1;
        getList({page: page, size: PAGE_SIZE, sub_id: this.sub_id}).then(rep => {
          if (vm.subData === null && rep.data.data.sub_data != null && rep.data.data.sub_data.banner != null) {
            rep.data.data.sub_data.banner = JSON.parse(rep.data.data.sub_data.banner);
            vm.subData = rep.data.data.sub_data;
          }
          if (rep.data.data.list != null) {
            rep.data.data.list.forEach(v => {
              if (v.banner != null) {
                v.banner = JSON.parse(v.banner);
              }
            });
            vm.list = vm.list.concat(rep.data.data.list);
          }
          if (vm.list.length === rep.data.data.count) {
            vm.finished = true;
          }
          vm.loading = false;
        })
      }
    }
  }
</script>